<div class="grid grid-cols-2">
  <div id="posts" phx-update="stream" class="space-y-8 mt-12 max-w-2xl mx-auto">
    <div :for={{id, post} <- @streams.posts} id={id}>
      <.live_component
        module={ShinstagramWeb.PostLive.PostComponent}
        id={id}
        post={post}
        profile={post.profile}
        patch={~p"/"}
      />
    </div>
  </div>

  <div>
    <.panel>
      <:header>Control Panel</:header>
      <div>
        <.outline_button phx-click="wake-up">🌞 Wake Up Everybody!</.outline_button>
        <.outline_button phx-click="sleep">😴 Everybody Sleep!</.outline_button>

        <.link navigate={~p"/profiles"}>
          <.outline_button>List Profiles</.outline_button>
        </.link>
      </div>
    </.panel>

    <.live_component
      module={ShinstagramWeb.LogsComponent}
      id="logs"
      logs={@streams.logs}
      show_names={true}
    />
  </div>
</div>

<.modal :if={@live_action in [:new, :edit]} id="post-modal" show on_cancel={JS.patch(~p"/")}>
  <.live_component
    module={ShinstagramWeb.PostLive.FormComponent}
    id={@post.id || :new}
    title={@page_title}
    action={@live_action}
    post={@post}
    patch={~p"/"}
  />
</.modal>
